<template>
  <PanerGrid @onSubmit="handleSubmit" @onReset="handleReset">
    <template v-slot:search>
      <div class="d-group-items d-layout-grid d-layout-grid-4">
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">名称</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.title" @keyup.enter="handleSubmit" class="d-form-input" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">所属文档</label>
            </div>
            <div class="d-form-el">
              <select v-model="search.archiveId" class="d-form-select">
                <option v-for="item in archiveList" :key="item.id" :value="item.id">{{ item.text }}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">状态</label>
            </div>
            <div class="d-form-el">
              <select v-model="search.status" class="d-form-select">
                <option v-for="item in statusList" :key="item.id" :value="item.id">{{ item.text }}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">标签</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.labels" @keyup.enter="handleSubmit" class="d-form-input" type="text" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <FormCalendar
            v-model="search.createTime"
            label="创建时间"
            labelWidth="80px"
            class="d-form-group-flex"
          ></FormCalendar>
        </div>
        <div class="d-grid-item">
          <FormCalendar
            v-model="search.updateTime"
            label="修改时间"
            labelWidth="80px"
            class="d-form-group-flex"
          ></FormCalendar>
        </div>
        <div v-if="false" class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">创建人</label>
            </div>
            <div class="d-form-el">
              <input class="d-form-input" @keyup.enter="handleSubmit" />
            </div>
          </div>
        </div>
        <div v-if="false" class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">修改人</label>
            </div>
            <div class="d-form-el">
              <input class="d-form-input" @keyup.enter="handleSubmit" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-slot:header>
      <div class="d-paner-caption">
        <span class="d-caption-text">页面列表</span>
        <div class="d-bar-tools d-bar-tools-condensed">
          <span class="d-tools-item">
            <a class="d-btn d-btn-plain-sign" @click="handleAddItem">添加</a>
          </span>
          <span @click="handleDelChecked" class="d-tools-item">
            <button class="d-btn d-btn-plain-sign" type="button">删除</button>
          </span>
        </div>
      </div>
      <div class="d-bar-tools d-bar-tools-right d-bar-tools-condensed">
        <a @click="handleReload" class="d-tools-item">
          <span class="d-btn d-btn-plain-sign d-btn-square-sm d-btn-flex"><RefreshIcon /></span>
        </a>
      </div>
    </template>
    <template v-slot:body>
      <Grid v-model="list" ref="gridList" :request="gridRequest" :pageSize="15">
        <GridColumn :width="48" type="checkbox" />
        <GridColumn :width="60" type="index" label="序号" />
        <GridColumn field="name" label="文档名称">
          <template v-slot:body="scope">
            <a :href="getMicroPath('#/section/item/' + scope.id)" title="文档页面" class="d-text-theme d-text-linker">{{ scope.name }}</a>
          </template>
        </GridColumn>
        <GridColumn field="archiveId" label="所属文档" format="select" :select="archiveList" />
        <GridColumn field="status" label="状态" format="select" :select="statusList" width="80" />
        <GridColumn field="updateTime" label="修改时间" format="datetime|yyyy-MM-dd HH:mm:ss" width="160" />
        <!-- <GridColumn field="updateUser" label="修改人" /> -->
        <GridColumn field="createTime" label="创建时间" format="datetime|yyyy-MM-dd HH:mm:ss" width="160" />
        <!-- <GridColumn field="createUser" label="创建人" /> -->
        <GridColumn field="action" :width="120" label="操作">
          <template v-slot:body="scope">
            <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
              <a :href="getMicroPath('#/section/item/' + scope.id)" class="d-tools-item d-text-theme" title="排版">
                <span class="d-icon-svg d-icon-svg-sm">
                  <svg viewBox="0 0 1024 1024"><path d="M295.5776 706.4064H271.36a35.84 35.84 0 0 1-35.84-35.84v-88.6272a35.84 35.84 0 0 1 35.84-35.84h23.9616V240.64c0-34.1504 51.2-34.1504 51.2 0v305.4592h27.648a35.84 35.84 0 0 1 35.84 35.84v88.6272a35.84 35.84 0 0 1-35.84 35.84h-27.8528a31.744 31.744 0 0 1 0.2048 3.7888v73.3184c0 34.1504-51.2 34.1504-51.2 0v-73.3184a31.744 31.744 0 0 1 0.256-3.7888z m-8.8576-51.2h72.0896v-57.9072H286.72v57.9072z m387.7376 51.2H650.24a35.84 35.84 0 0 1-35.84-35.84v-88.6272a35.84 35.84 0 0 1 35.84-35.84h23.9616V240.64c0-34.1504 51.2-34.1504 51.2 0v305.4592h27.648a35.84 35.84 0 0 1 35.84 35.84v88.6272a35.84 35.84 0 0 1-35.84 35.84h-27.8528a31.744 31.744 0 0 1 0.2048 3.7888v73.3184c0 34.1504-51.2 34.1504-51.2 0v-73.3184a31.744 31.744 0 0 1 0.256-3.7888z m-8.8576-51.2h72.0896v-57.9072H665.6v57.9072z m-180.5824-337.408a31.744 31.744 0 0 1-0.256-3.7888V240.64c0-34.1504 51.2-34.1504 51.2 0v73.3696a31.744 31.744 0 0 1-0.2048 3.7376h27.8528a35.84 35.84 0 0 1 35.84 35.84v88.6272a35.84 35.84 0 0 1-35.84 35.84h-27.648v305.4592c0 34.1504-51.2 34.1504-51.2 0V478.0544H460.8a35.84 35.84 0 0 1-35.84-35.84v-88.576a35.84 35.84 0 0 1 35.84-35.84h24.2176z m-8.8576 51.2v57.856h72.0896v-57.856H476.16zM184.32 166.4a17.92 17.92 0 0 0-17.92 17.92v655.36c0 9.8816 8.0384 17.92 17.92 17.92h655.36a17.92 17.92 0 0 0 17.92-17.92V184.32a17.92 17.92 0 0 0-17.92-17.92H184.32z m0-66.56h655.36c46.6432 0 84.48 37.8368 84.48 84.48v655.36a84.48 84.48 0 0 1-84.48 84.48H184.32a84.48 84.48 0 0 1-84.48-84.48V184.32c0-46.6432 37.8368-84.48 84.48-84.48z"></path></svg>
                </span>
              </a>
              <a @click="handleEditItem(scope)" class="d-tools-item d-text-theme" title="编辑"><EditIcon size="sm" /></a>
              <a @click="handleDelItem(scope)" class="d-tools-item d-text-theme"><DeleteIcon size="sm" /></a>
            </div>
          </template>
        </GridColumn>
      </Grid>
      <SettingView @onSubmitSuccess="handleEditSuccess" ref="editView" />
    </template>
  </PanerGrid>
</template>

<script>
import { PanerGrid } from '@daelui/vdog/dist/pages.js'
import { Grid, GridColumn, Dialoger, FormCalendar, Pager, FormSelecter } from '@daelui/vdog/dist/components.js'
import { RefreshIcon, SettingIcon, EditIcon, DeleteIcon } from '@daelui/vdog/dist/icons.js'
import { zh as locale } from '@daelui/dogjs/dist/locale.js'
import secSer, { api } from '../../service/action/section.action.js'
import archiveSer from '../../service/action/archive.action'
import SettingView from './setting'
import { getter } from '../../service/stock/index.js'

export default {
  components: {
    PanerGrid,
    Grid,
    GridColumn,
    RefreshIcon,
    SettingIcon,
    EditIcon,
    DeleteIcon,
    FormCalendar,
    Pager,
    SettingView,
    FormSelecter
  },

  data () {
    return {
      // 搜索条件
      search: {
        title: '',
        type: '',
        status: '',
        labels: '',
        content: '',
        createTime: '',
        updateTime: ''
      },
      list: [],
      // 表格请求配置
      gridRequest: {
        url: api.queryListPage.url, // 请求地址
        method: api.queryListPage.method, // 请求方式
        params: {} // 请求参数
      },
      // 文档列表
      archiveList: [],
      // 状态
      statusList: getter.statusList()
    }
  },

  methods: {
    /**
     * @function 查询事件处理
    */
    handleSubmit () {
      this.$refs.gridList.reload(this.search)
    },

    /**
     * @function 重置事件
    */
    handleReset () {
      this.search = {
        title: '',
        type: '',
        labels: '',
        content: '',
        createTime: '',
        updateTime: ''
      }
    },

    /**
     * @function 删除选定的数据
    */
    handleDelChecked () {
      let items = this.$refs.gridList.getChecked()
      this.removeItems(items)
    },

    /**
     * @function 显示与隐藏编辑视图
    */
    handleEditItem (item) {
      this.editInfo = {edit: true, item}
      this.showEditView()
    },

    /**
     * @function 添加
    */
    handleAddItem () {
      this.editInfo = {}
      this.showEditView()
    },
    /**
     * @function 设置单条数据
    */
    showEditView () {
      this.$refs.editView.show(this.editInfo)
    },

    /**
     * @function 编辑成功
    */
    handleEditSuccess () {
      this.handleReload()
    },

    /**
     * @function 删除单条数据
    */
    handleDelItem (item) {
      this.removeItems([item])
    },

    /**
     * @function 删除多条数据
    */
    removeItems (items) {
      items = Array.isArray(items) ? items : []
      if (items.length < 1) {
        Dialoger.warn(locale.list.selectOne)
        return false
      }
      Dialoger.confirm(locale.message.confirmDelete).then(b => {
        if (!b) {
          return false
        }
        items = items.map(item => item.id)
        secSer.removeItem(items).then(result => {
          this.$refs.gridList.reload()
        })
      })
    },

    /**
     * @function 重新加载
    */
    handleReload () {
      this.$refs.gridList.reload(this.search)
    }
  },

  mounted () {
    // 查询文档列表
    archiveSer.queryAllListOption().then(list => {
      list.unshift({id: '', text: '全部'})
      this.archiveList = list
    })
  }
}
</script>

<style scoped>
.d-form-label {
  width: 80px;
}
</style>
